<template>
	<div class="yjw-address" v-if="show_">
		<view class="add-pop-btm">
			<view class="apb-head">
				<text></text>
				<text class="apb-head-txt">所在地区</text>
				<image class="apb-head-img" src="https://www.zzzsyh.com/applets/agent/agent/close.png" mode="" @click="cli_closePop">
				</image>
			</view>
			<view class="apd-chan">
				<view class="apd-chan-box" v-if="listNum == 2 || listNum == 3 || listNum == 4" @click="cli_address_pro">
					<text class="apd-chan-txt">{{pro}}</text>
					<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 1}"></view> -->
				</view>
				<view class="apd-chan-box" v-if="listNum == 3 || listNum == 4" @click="cli_address_city">
					<text class="apd-chan-txt">{{city}}</text>
					<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 2}"></view> -->
				</view>
				<view class="apd-chan-box" v-if="listNum == 4" @click="cli_address_country">
					<text class="apd-chan-txt">{{country}}</text>
					<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 3}"></view> -->
				</view>
				<view class="apd-chan-box" v-if="show_title">
					<text class="apd-chan-txt">请选择</text>
					<view class="apd-chan-btm apdChanBtmColor"></view>
				</view>
			</view>
			<view class="apd-li-box">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="apd-li" v-if="listNum == 1" v-for="(item, index) of list_pro" :key="index"
						@click="cli_pop_li1(item, index)">
						<text :class="{apdLiTxt : popImgNum1 == index}">{{item.areaName}}</text>
						<image class="apd-li-img" v-show="popImgNum1 == index" src="https://www.zzzsyh.com/applets/agent/agent/duigou.png"
							mode=""></image>
					</view>
					<view class="apd-li" v-if="listNum == 2" v-for="(item, index) of list_city" :key="index"
						@click="cli_pop_li2(item, index)">
						<text :class="{apdLiTxt : popImgNum2 == index}">{{item.areaName}}</text>
						<image class="apd-li-img" v-show="popImgNum2 == index" src="https://www.zzzsyh.com/applets/agent/agent/duigou.png"
							mode=""></image>
					</view>
					<view class="apd-li" v-if="listNum == 3" v-for="(item, index) of list_country" :key="index"
						@click="cli_pop_li3(item, index)">
						<text :class="{apdLiTxt : popImgNum3 == index}">{{item.areaName}}</text>
						<image class="apd-li-img" v-show="popImgNum3 == index" src="https://www.zzzsyh.com/applets/agent/agent/duigou.png"
							mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 相关用法 -->
		<!-- 父组件引入 -->
		<!-- <Address :show_="show_" @childer="childer_address" @childerList="getAddressList"></Address> -->
		<!-- 事件方法 -->
		<!-- 弹窗隐藏显示 -->
		<!-- 获取数据list -->
		<!-- childer_address (e) {
			console.log(e);
			this.show_ = e
		},
		getAddressList (e) {
			console.log(e);
		} -->
	</div>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		name: "addre",
		props: {
			show_: false,
		},
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				popImgNum1: -1,
				popImgNum2: -1,
				popImgNum3: -1,
				listNum: 1,
				list_pro: [],
				list_city: [],
				list_country: [],
				areaList: [],
				area: '',
				pro: '',
				pro_id: '',
				city: '',
				city_id: '',
				country: '',
				country_id: '',
				name: '',
				phone: '',
			};
		},
		mounted() {
			// this.get_getAreaByPid('', 1)
			this.getarea('',1)
		},
		methods: {
			cli_goaddress() {
				this.show_title = true
				this.listNum = 1
				this.popImgNum1 = -1
				this.popImgNum2 = -1
				this.popImgNum3 = -1
			},
			// 点击关闭弹窗
			cli_closePop() {
				// this.show_ = false
				this.$emit('childer', false)
			},
			// 点击所在省市县
			cli_address_pro() {
				this.listNum = 1
			},
			cli_address_city() {
				this.listNum = 2
			},
			cli_address_country() {
				this.cli_address_country = false
				this.listNum = 3
			},
			// 点击地址列表
			cli_pop_li1(item, index) {
				this.popImgNum1 = index
				// this.get_getAreaByPid(item.id, 2)
				this.getarea(item.id,2)
				this.listNum = 2
				this.pro = item.areaName
				this.pro_id = item.id
			},
			cli_pop_li2(item, index) {
				this.popImgNum2 = index
				// this.get_getAreaByPid(item.id, 3)
				this.getarea(item.id,3)
				this.listNum = 3
				this.city = item.areaName
				this.city_id = item.id
			},
			cli_pop_li3(item, index) {
				this.popImgNum3 = index
				this.listNum = 4
				this.show_title = false
				this.country = item.areaName
				this.country_id = item.id
				this.area = this.pro + this.city + this.country
				// this.areaList.push({
				// 	pCode: this.pro_id,
				// 	pName: this.pro,
				// 	cCode: this.city_id,
				// 	cName: this.city,
				// 	aCode: this.country_id,
				// 	aName: this.country
				// })
				let areaList = [{
					pCode: this.pro_id,
					pName: this.pro,
					cCode: this.city_id,
					cName: this.city,
					aCode: this.country_id,
					aName: this.country
				}]
				this.$emit('childerList', areaList)
				this.$emit('childer', false)
			},
			// 删除地址
			cli_close_arealist(item, index) {
				console.log(item, index);
				this.areaList.splice(index, 1)
			},

			// 获取地址信息
			// get_getAreaByPid(pid, num) {
			// 	let _that = this
			// 	uni.request({
			// 		url: allapi.getAreaByPid,
			// 		data: {
			// 			pid: pid
			// 		},
			// 		success: (res) => {
			// 			let dat = res.data.data
			// 			// console.log(dat);
			// 			if (num == 1) {
			// 				_that.list_pro = dat
			// 			} else if (num == 2) {
			// 				_that.list_city = dat
			// 			} else if (num == 3) {
			// 				_that.list_country = dat
			// 			}
			// 		}
			// 	})
			// },
			getarea(pid,num) {
				let _that = this
				if (num == 1) {
					_that.getProvinceByAgentId ()
				} else if (num == 2) {
					_that.getCityByAgentId(pid)
				} else if (num == 3) {
					_that.getAreaByAgentId(pid)
				}
			},
			getProvinceByAgentId() {
				let _that = this
				uni.request({
					url: allapi.getProvinceByAgentId,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log('获取省', res);
						let dat = res.data.data
						_that.list_pro = dat
					}
				})
			},
			getCityByAgentId(pid) {
				let _that = this
				uni.request({
					url: allapi.getCityByAgentId,
					data: {
						agentId: this.agentId,
						pId: pid
					},
					success: (res) => {
						console.log('获取市', res);
						let dat = res.data.data
						_that.list_city = dat
					}
				})
			},
			getAreaByAgentId(pid) {
				let _that = this
				uni.request({
					url: allapi.getAreaByAgentIdd,
					data: {
						agentId: this.agentId,
						pId: pid,
						all: '0'
					},
					success: (res) => {
						console.log('获取区', res);
						let dat = res.data.data
						_that.list_country = dat
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.yjw-address {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0, 0, 0, 0.5);
		left: 0;
		top: 0;
		z-index: 666;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;


	}

	.cIC {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.cICMain {
		flex: 1;
		background: linear-gradient(180deg, #FDD194 0%, #F6F6F6 100%);
	}

	.cICMainBox {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 70rpx 32rpx 86rpx 32rpx;
	}

	.cICMainBoxHead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #666666;
		font-size: 28rpx;
	}

	.cICMainBoxHeadR {
		font-size: 24rpx;
		color: #333333;
	}

	.cICMainBoxHeadLi {
		display: flex;
		align-items: center;
		height: 72rpx;
		margin-top: 56rpx;
	}

	.cICMainBoxHeadLiL {
		width: 196rpx;
		color: #666666;
		font-size: 28rpx;
	}

	.cICMainBoxHeadLiR {
		height: 100%;
		flex: 1;
		background: #F8F9FC;
		border-radius: 8rpx;
		display: flex;
		align-items: center;

	}

	.cICMainBoxHeadLiArea {
		min-height: 102rpx;
		display: flex;
		margin-top: 56rpx;
	}

	.cICMainBoxHeadLiAreaLR {
		flex: 1;
		font-size: 24rpx;
		color: #333333;
	}

	.cICMainBoxHeadLiAreaLRLi {
		display: flex;
		align-items: center;
		height: 40rpx;
	}

	.cICMainBoxHeadLiAreaLRLiL {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cICMainBoxHeadLiAreaLRLiR {
		width: 28rpx;
		height: 28rpx;
	}

	.cICMainBoxHeadLiR-input {
		margin: 0 24rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.cICMainBoxHeadLiAreaLRAdd {
		margin-left: 24rpx;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cICMainBoxHeadLiRDown {
		width: 18px;
		height: 11px;
		margin-right: 24rpx;
	}

	.cICMainBoxHeadLiAdd {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.cICMainBoxHeadLiAddR {
		width: 256rpx;
		height: 72rpx;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
	}

	.cICMainBoxHeadLiAddRL {
		width: 28rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 50%;
		color: #E22F48;
		text-align: center;
		line-height: 28rpx;
		margin-left: 42rpx;
	}

	.cICMainBoxHeadLiAddRR {
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: 26rpx;
	}

	.cICBtn {
		background: #FFFFFF;
		height: 120rpx;
		padding-bottom: 68rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cICBtnBox {
		margin: 0 40rpx;
		flex: 1;
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 46rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.add-pop-btm {
		width: 100%;
		height: 960rpx;
		background: #fff;
		border-top-right-radius: 24rpx;
		border-top-left-radius: 24rpx;
	}

	.apb-head {
		height: 92rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx;
	}

	.apb-head-txt {
		color: #333333;
		font-size: 30rpx;
	}

	.apb-head-img {
		width: 48rpx;
		height: 48rpx;
	}

	.apd-chan {
		height: 96rpx;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #333333;
		padding: 0 24rpx;
		border-top: 2rpx solid #DDDDDD;
		border-bottom: 2rpx solid #DDDDDD;
	}

	.apd-chan-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
	}

	.apd-chan-txt {
		height: 56rpx;
		line-height: 56rpx;
		margin-bottom: 6rpx;
	}

	.apd-chan-btm {
		width: 56rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}

	.apdChanBtmColor {
		background: #F76B1F !important;
	}

	.apd-li-box {
		padding: 20rpx 24rpx;
		overflow: auto;
		height: 620rpx;
	}

	.apd-li {
		height: 80rpx;
		color: #333333;
		line-height: 80rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.apdLiTxt {
		color: #F76B1F !important;
	}

	.apd-li-img {
		width: 40rpx;
		height: 30rpx;
	}
</style>
